<template>
  <div>
    <div ref="chart" style="width:100%;height:376px"></div>
  </div>
</template>

<script>
  export default {
    props: {
      series: {
        type: Array,
        default: () => [],
      },
      seriesName: {
        type: String,
        default: '',
      },
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        const myChart = this.$echarts.init(this.$refs.chart);
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)',
          },
          series: this.series,
        };
        myChart.setOption(option);
        window.addEventListener('resize', function() {
          myChart.resize();
        });

        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function() {
            myChart.resize();
          });
        });
      },
    },
  };
</script>

<style></style>
